<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="60%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              用户名
            </template>
            <el-input v-model="supplierBasicInfo.username" disabled />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              手机号
            </template>
            <el-input v-model="supplierBasicInfo.phone" disabled />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              头像
            </template>
            <el-avatar
              shape="square"
              class="avatar"
              :src="supplierBasicInfo.avatar"
            ></el-avatar>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              邮箱
            </template>
            <el-input v-model="supplierBasicInfo.email" disabled />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              公司名称
            </template>
            <el-input
              v-model="supplierBasicInfo.companyInfo.companyName"
              disabled
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              法人代表
            </template>
            <el-input
              v-model="supplierBasicInfo.companyInfo.corporateRepresentative"
              disabled
            />
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-office-building" />
              所在分组
            </template>
            <el-select
              v-model="form.products"
              clearable
              filterable
              placeholder="全部"
              multiple
              size="medium"
              style="width: 100%"
              @change="groupSelected"
            >
              <el-option
                v-for="item in groupList"
                :key="item.id"
                :value="item.id"
                :label="item.productName"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-office-building" />
              业务描述
            </template>
            <el-input v-model="form.description" />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProductInfosByManagerId } from "@/api/product";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    mainInfo: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {},
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      form: {
        products: [],
        description: "",
        supplierId: "",
      },
      supplierBasicInfo: {
        avatar: "",
        username: "",
        phone: "",
        email: "",
        companyInfo: {
          companyName: "",
          corporateRepresentative: "",
        },
      },
      groupList: [], // 业务获取
    };
  },
  computed: {},
  created() {
    this.getgroupList();
  },
  methods: {
    async getgroupList() {
      const result = await getProductInfosByManagerId({
        managerId: this.$store.getters.accountId,
      });
      this.groupList = result.data;
    },
    groupSelected(val) {
      // console.log("@@@@@@", val);
      this.form.products = val;
      if (val) {
        this.form.description = "";
      }
    },
    open() {
      console.log("@@AAAAAAA");
      console.log("@@MainInfo", this.mainInfo);
      this.supplierBasicInfo = this.mainInfo;
      // 编辑弹窗 内部数据 填充
      this.form.supplierId = this.mainInfo.id;
      this.form.description = this.mainInfo.groupDescription;
      this.form.products = this.mainInfo.groups.map((g) => {
        return g.id;
      });
      console.log(this.form.products);
    },
    initForm() {
      this.form = {
        products: [],
        description: "",
        supplierId: "",
      };
      this.supplierBasicInfo = {
        avatar: "",
        username: "",
        phone: "",
        email: "",
        companyInfo: {
          companyName: "",
          corporateRepresentative: "",
        },
      };
    },
    cancel() {
      this.$emit("cancel");
      this.initForm();
    },
    ok() {
      this.$emit("ok", this.form);
      this.initForm();
    },
  },
};
</script>

<style scoped>
.avatar {
  width: 66px;
  height: 66px;
  display: block;
}
</style>
